I'm having second thoughts on this approach. The items with which we populate a table could come from anywhere in the codebase, e.g. an external service or even a Redux store. It seems like this solution conflates concerns by requiring consumers to mix UI code with non-UI code. It also seems inefficient to make the user traverse the entire items array to decorate each item, when the table itself will already perform similar traversals.

What if the table accepted a rowProps prop?

const getRowProps = (row, id, index) => {
  const { firstName } = row;
  return {
    onClick: () => console.log(`clicked ${firstName}`),
    'aria-label': `row-${firstName}`,
    className: 'customRowClass',
  };
};

<EuiBasicTable items={items} rowProps={getRowProps} />

This is a similar pattern to what we already have with itemId. We could even duck-type this prop by letting it accept a function or an object (which might be best for ML's use case since they just want to apply a single onClick handler to all rows).

Thoughts?

Was wondering if the current table columns property is sufficient for allowing custom props at the cell level?

Great point! Yes I think this would work well. I'll see if I can add this in this PR.

I like the idea of a rowProps prop quite a bit. It probably makes sense to add a cellProps as well, which would resolve ML's need for correlating the cell with another element's representation of the data.

In ML, we currently only have need for the rowProps (detecting onMouseEnter and onMouseLeave for a table row, but adding cellProps too would seem to make this functionality future-proof.

@peteharverson @chandlerprall Ready for another look. I also introduced a breaking change which applies pass-through props to the <td> element (they were originally applied to the <div> child of the <td>).

🏆 I just have to point out that all credit for this idea goes to @chandlerprall who first proposed it in #836!

Good point @chandlerprall! Updated.